<template>
	<div class="d-flex flex-column my-container p-3">

		<el-form ref="form" :model="searchForm" :inline="true" class="d-flex justify-content-end">
			<el-form-item>
				<el-input prefix-icon="el-icon-search" type="input" placeholder="请输入报文名称"
					v-model="searchForm.searchInput" @keyup.enter.native="searchClick" />
			</el-form-item>
			<el-form-item>
				<el-button type="primary" icon="el-icon-search" @click="searchClick">搜索</el-button>
			</el-form-item>
		</el-form>

		<div class="col d-flex flex-column shadow p-3 rounded-lg">
			<div class="mb-3">
				<el-button type="success" icon="el-icon-refresh" @click="searchClick">刷新</el-button>
			</div>
			<div class="col d-flex over-auto">
				<el-table v-loading="loading" border :data="tableData" height="100%" ref="tableRef">
					<el-table-column type="index" label="序号" width="80" align="center" />
					<el-table-column prop="configName" label="报文名称" align="center" />
					<el-table-column prop="configDes" label="报文描述" align="center" />
					<el-table-column prop="upDown" label="上下行类型" align="center" />
					<!--					<el-table-column prop="subType" label="报文类型" align="center" />-->
					<el-table-column prop="subCode" label="TOPIC" align="center" />
					<el-table-column prop="upDown" label="是否配置" align="center" width="80">
						<template slot-scope="scope">
							<el-tag
								:type="scope.row.status == '1' ? 'success' : 'danger'">{{scope.row.status == "1" ? "是" : "否"}}
							</el-tag>
						</template>
					</el-table-column>
					<el-table-column prop="upDown" label="是否启用" align="center" width="80">
						<template slot-scope="scope">
							<el-tag
								:type="scope.row.isUse == 'ON' ? 'success' : 'danger'">{{scope.row.isUse == "ON" ? "是" : "否"}}
							</el-tag>
						</template>
					</el-table-column>
          <el-table-column prop="createByName" label="创建人" align="center"></el-table-column>
          <el-table-column label="创建时间" align="center" prop="createTime" width="170" >
            <template slot-scope="scope">
              {{ scope.row.createTime }}
            </template>
          </el-table-column>
          <el-table-column prop="updateByName" label="更新人" align="center"></el-table-column>
          <el-table-column label="更新时间" align="center" prop="createTime" width="170" >
            <template slot-scope="scope">
              {{ scope.row.updateTime }}
            </template>
          </el-table-column>
					<el-table-column label="操作" align="center">
						<template #default="{ row }">
							<el-button type="primary" size="mini" @click="handleLook(row)">查看</el-button>
							<el-button type="warning" size="mini" @click="openConfigDialog(row)">配置</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<pagination class="pagination" :total="count" :page.sync="pageIndex" :limit.sync="pageSize"
				@pagination="pagination" />
		</div>

		<!-- 弹框 -->
		<yc-dialog ref="ycDialog" dialogTitle="配置" centerTitle="配置">
			<template #content>
				<div class="dialog-content">
					<el-form ref="configFormRef" :rules="rules" :model="configForm" label-width="100px">
						<el-form-item label="协议名称" prop="agreementCode">
							<el-select v-model="configForm.agreementCode" style="width: 100%;">
								<el-option v-for="item in agreementCodeList" :key="item.agreementCode"
									:label="item.agreementName" :value="item.agreementCode" />
							</el-select>
						</el-form-item>
						<el-form-item v-if="isWaitTimeShow" label="心跳时间(s)" prop="waitTime">
							<el-input v-model="configForm.waitTime" />
						</el-form-item>
						<el-form-item label="是否启用" prop="isUse">
							<el-select v-model="configForm.isUse" style="width: 100%;">
								<el-option v-for="item in isUseList" :key="item.value" :label="item.label"
									:value="item.value" />
							</el-select>
						</el-form-item>
					</el-form>
				</div>
			</template>
			<template #footer>
				<el-button type="primary" @click="saveConfigBtn">确定</el-button>
				<el-button @click="$refs.ycDialog.dialogVisible = false">取消</el-button>
			</template>
		</yc-dialog>

		<!-- 封装操作后弹框 -->
		<global-message v-if="isGlobalMessageShow" @receive="receive" :message="message" />
	</div>
</template>

<script>
	import {
		queryPageTopicMain,
		queryAllAgreement,
		deactivateBTopicMain
	} from "@/api/settingManagement/protocolMessage"
	import ycDialog from "@/components/pageDialog"

	export default {
		data() {
			return {
				isGlobalMessageShow: false,
				messageTitleDes: "",
				message: "",
				messageBoxSaveShow: false,
				tableData: [],
				loading: false,
				centerTitle: "",
				configForm: {
					configCode: '',
					agreementCode: "",
					waitTime: 0,
					isUse: ""
				},
				rules: {
					agreementCode: [{
						required: true,
						message: "请选择协议名称",
						trigger: "change"
					}],
					waitTime: [{
						required: true,
						message: "请输入心跳时间",
						trigger: "blur"
					}],
					isUse: [{
						required: true,
						message: "请选择是否启用",
						trigger: "change"
					}]
				},
				isUseList: [{
						value: "ON",
						label: "是"
					},
					{
						value: "OFF",
						label: "否"
					}
				],
				agreementCodeList: [],
				isWaitTimeShow: true,
				searchForm: {
					searchInput: ""
				},
				pageIndex: 1,
				pageSize: 20,
				count: 0
			}
		},
		components: {
			ycDialog
		},
		created() {
			this.queryBTopicMainList()
		},
		methods: {
			// 查询协议报文list
			queryBTopicMainList(pageIndex = 1, pageSize = 20) {
				this.loading = true
				const {
					searchInput
				} = this.searchForm
				queryPageTopicMain({
					pageIndex,
					pageSize,
					configName: searchInput
				}).then(res => {
					this.tableData = res.object.data
					this.count = res.object.count
				}).finally(() => {

					this.loading = false
				})
			},
			// 分页
			pagination(pageItem) {
				this.queryBTopicMainList(pageItem.page, pageItem.limit)
			},
			// 模糊查询
			async searchClick() {
				this.queryBTopicMainList(1, 20)
			},
			// 查看
			handleLook(row) {
				this.$router.push({
					path: "/protocolMessage/protocolMessageDetail",
					query: {
						configCode: row.configCode
					}
				})
			},
			// 配置
			openConfigDialog(row) {
				if (this.$refs["configFormRef"]) {
					this.$refs["configFormRef"].resetFields();
				}
				let rowData = {
					...row
				}
				if (rowData) {
					this.isWaitTimeShow = rowData.subType == 'SX_CD' || rowData.subType == 'SX_SD'
					this.configForm.configCode = rowData.configCode
					this.configForm.agreementCode = rowData.agreementCode
					this.configForm.waitTime = rowData.waitTime
					this.configForm.isUse = rowData.isUse
				}

				queryAllAgreement().then(res => {
					this.agreementCodeList = res.object
				})
				this.$refs.ycDialog.dialogVisible = true
			},
			// 配置保存按钮
			saveConfigBtn() {
				this.$refs["configFormRef"].validate((valid) => {
					if (valid) {
						// this.configForm.configCode = this.configCode
						deactivateBTopicMain(this.configForm).then(res => {
							if (res.status == 200) {
								this.$message({
									type: "success",
									message: res.message,
								})
								this.queryBTopicMainList()
								this.$refs.ycDialog.dialogVisible = false
							}
						})
					}
				});
			},
			/**
			 * 刷新
			 */
			refresh() {
				this.loading = true
				this.queryBTopicMainList()
			},
			/**
			 * globalMessage的知道按钮的方法
			 * */
			receive() {
				this.isGlobalMessageShow = false
			},
			async messageBoxSave(show) {
				this.messageBoxSaveShow = show
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pagination {
		display: flex;
		justify-content: flex-end;
	}
</style>
